<template>
  <!-- 课程导航 -->
  <div class="educational-box">
    <div class="education">
      <ul class="navbar">
        <li
          :class="flag === item.id || $route.path === item.url ? 'active' : ''"
          v-for="item in navbarList"
          :key="item.id"
          @click="changeURL(item.url)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import router from '@/router'

export default {
  name: 'educational',
  data() {
    return {
      flag: '',
      url: '',
      // 导航栏数据
      navbarList: [
        {
          id: 0,
          title: '网站首页',
          url: '/education/home',
        },
        {
          id: 1,
          title: '课程管理',
          url: '/education/course',
        },
        {
          id: 2,
          title: '教务教学',
          url: '/education/teachering',
        },
        {
          id: 3,
          title: '财务管理',
          url: '/education/finance',
        },
      ],
    }
  },
  methods: {
    // 跳转页面
    changeURL(url) {
      this.flag = ''
      if (!(this.$route.path === url)) {
        this.$router.push(url)
      }
    },
  },
  watch: {
    $route: function (newVal, oldVal) {
      let urls = newVal.path.split('/')
      let twoURL = '/' + urls[1] + '/' + urls[2]
      for (let i = 0; i < this.navbarList.length; i++) {
        if (twoURL === this.navbarList[i].url) {
          this.flag = i
          break
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.educational-box {
  margin: 0 auto;
  width: 85%;
  margin-bottom: 30px;
  .education {
    height: 50px;
    background-color: #1faaff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .navbar {
      display: flex;
      list-style: none;
      color: #fff;
      overflow: hidden;
      margin-left: 30px;
      .active {
        background: #fff;
        color: #000;
      }
      li {
        margin-top: 5px;
        width: 120px;
        height: 60px;
        line-height: 50px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
